<template>
  <div class="pb-64px">
    <t-message theme="success" v-model="visible1"
      :offset="['10px', '16px']" :duration="5000"
      :content="message" />
    <Card v-for="(item, index ) in loginState.chatList" :key="item.title" :item="item"
      @pinglun="pinglun" @jubao="jubao">
    </Card>

    <t-dialog v-model:visible="isShowDialog2" close-on-overlay-click
      title="评论" :cancel-btn="cancelBtn"
      :confirm-btn="confirmBtn" @confirm="onConfirm"
      @cancel="onCancel">
      <!-- <p>评论需要审核后方可展示</p> -->
      <t-input placeholder="小伙伴请注意言语友善哦~" v-model="content" />
    </t-dialog>

    <t-dialog v-model:visible="isShowDialog1" title="举报"
      content="我们会进行核实，一旦发现问题将严肃处理，感谢您的反馈" cancel-btn="取消"
      confirm-btn="确认" @confirm="onConfirm1" @cancel="onCancel1">
    </t-dialog>

  </div>
</template>

<script setup lang="ts">
  import { ref, onActivated, onDeactivated } from 'vue'
  import Card from '@/components/Card.vue'
  import { useStore } from '@/store/loginState'
  const loginState = useStore()
  const list = loginState.chatList
  const visible1 = ref(false)
  const isShowDialog1 = ref(false)
  const isShowDialog2 = ref(false)
  const content = ref("")
  const message = ref("")
  const confirmBtn = {
    content: '确认',
    variant: 'text',
    size: 'large',
  }
  const cancelBtn = {
    content: '取消',
    variant: 'text',
    size: 'large',
  }
  let curTitle = ''

  const onConfirm = () => {
    isShowDialog2.value = false
    content.value = ""
    visible1.value = true
    message.value = "提交成功"
  }
  const onCancel = () => {
    isShowDialog2.value = false
    content.value = ""
  }

  const onConfirm1 = () => {
    isShowDialog1.value = false
    visible1.value = true
    message.value = "举报成功"
    loginState.removeChatList(curTitle)
  }
  const onCancel1 = () => {
    isShowDialog1.value = false
  }

  const pinglun = () => {

    isShowDialog2.value = true
  }

  const jubao = (title) => {
    curTitle = title
    isShowDialog1.value = true
  }
</script>

<style scoped></style>